<template>
  <div class="set">
    <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <van-cell title="视频下载清晰度" value="流畅 | 高清" />
    </van-cell-group>
    <van-cell van-cell center title="视频自动连播放">
      <template #right-icon>
        <van-switch v-model="checked" size="24" />
      </template>
    </van-cell>
    <van-cell van-cell center title="允许使用2G/3G/4G网络观看视频">
      <template #right-icon>
        <van-switch v-model="checks" size="24" />
      </template>
    </van-cell>
    <van-cell van-cell center title="允许使用2G/3G/4G网络下载视频">
      <template #right-icon>
        <van-switch v-model="check" size="24" />
      </template>
    </van-cell>
    <van-cell-group>
      <van-cell title="清除缓存" value="65M" />
      <van-cell title="关于" is-link />
    </van-cell-group>
    <button class="exit" @click="logout">退出账号</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      checks: false,
      check: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    logout() {
      if (confirm("是否确认退出")) {
        this.$router.push({
          name: "Logout",
        });
        localStorage.removeItem("account");
      }
    },
  },
  created() {
    this.$store.commit("tabHide");
  },
};
</script>

<style lang="scss">
.set {
  .van-nav-bar__title {
    font-weight: bold;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    font-weight: bold;
  }
  .van-cell {
    color: rgba(80, 80, 80, 1);
    font-size: 14px;
  }
  .exit {
    width: 347px;
    height: 49px;
    color: red;
    border: rgba(229, 229, 229, 1) solid 1px;
    border-radius: 5px;
    margin: 100px 14px;
    text-align: center;
    line-height: 49px;
    background-color: white;
  }
}
</style>